<template>
  <div>
    <!--此处与项目无关-->
    <el-switch v-model="bg" active-color="red" inactive-color="yellowgreen" @change="changeHandler">
    </el-switch>

    <el-progress :text-inside="false" :stroke-width="5" :percentage="(page/9)*100" :format="neirong"></el-progress>

    <!-- 商品分类三级联动 -->
    <Category :fetchCategoryId="fetchCategoryId"></Category>
    <!-- 展示已有SPU的结构 -->
    <div v-show="scene == 0">
      <el-card
        shadow="always"
        :body-style="{ padding: '20px' }"
        style="margin: 20px 0px"
      >
        <el-button
          type="primary"
          size="default"
          icon="el-icon-plus"
          :disabled="c3 ? false : true"
          @click="addSpu"
          v-if="$isShowBtn('btn.Spu.add')"
          >添加SPU</el-button
        >
        <el-table
          border
          stripe
          style="margin: 20px 0px"
          :data="spuInfo.records"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width align="center">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width align="center">
            <template slot-scope="{ row, $index }">
              <HintButton
                title="添加SKU"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addSku(row)"
              ></HintButton>
              <HintButton
                title="修改SPU"
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="updateSpu(row)"
              ></HintButton>
              <HintButton
                title="查看当前SPU全部SKU"
                type="info"
                icon="el-icon-info"
                size="mini"
                @click="watchSku(row)"
              ></HintButton>
              <HintButton
                title="删除SPU"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteSpu(row)"
              ></HintButton>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="text-align: center"
          @size-change="sizeHandler"
          @current-change="getSpu"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="spuInfo.total"
          background
        >
          :pager-count="7">
        </el-pagination>
      </el-card>
    </div>
    <!-- 子组件 -->
    <AddSpu ref="spu" v-show="scene == 1" @changeScene="changeScene"></AddSpu>
    <AddSku v-show="scene == 2" ref="sku" @changeScene="changeScene"></AddSku>
    <!-- 对话框 -->
    <el-dialog title="SKU列表" :visible.sync="dialogTableVisible">
      <el-table :data="skuArr" v-loading="load1">
        <el-table-column
          prop="skuName"
          label="名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
          width="200"
        ></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
//引入子组件
import AddSpu from "./addSpu";
import AddSku from "./addSku";
export default {
  name: "",
  data() {
    return {
      bg:'',
      load1: false,
      //用于控制对象框显示与隐藏
      dialogTableVisible: false,
      //loading控制数值
      loading: false,
      //切换场景的属性
      scene: 0, //0默认  1:添加|修改SPU  2 添加SKU
      //父组件SPU接受一级、二级、三级分类的ID
      c1: "",
      c2: "",
      c3: "",
      //初始化获取SPU参数
      page: 1, //当前第几页
      limit: 3, //一页展示几条数据
      //存储当前三级分类的下的SPU信息
      spuInfo: {},
      skuArr: [],
    };
  },
  methods: {
    //三级分类(三级联动)自定义事件的回调
    //获取分类的ID(一级、二级、三级)
    fetchCategoryId(id, level) {
      switch (level) {
        case 1:
          this.c1 = id;
          this.c2 = "";
          this.c3 = "";
          break;
        case 2:
          this.c2 = id;
          this.c3 = "";
          break;
        default:
          this.c3 = id;
          //发请求获取当前三级分类下SPU信息
          this.getSpu();
          break;
      }
    },
    //获取当前三级分类下的SPU【类】
    async getSpu(pager = 1) {
      //发请求之前loading开始动起来
      this.loading = true;
      //点击分页器页码的时候,再次整理参数发请求即可！！
      this.page = pager;
      //整理参数:page,当前第几个 limit:一页展示几条数据  category3Id:某一个三级分类的id
      const { page, limit, c3 } = this;
      //发请求
      let result = await this.$http.spu.reqSpuList(page, limit, c3);
      if (result.code == 200) {
        this.spuInfo = result.data;
        this.loading = false;
      }
    },
    //当前页展示数据条数变化
    sizeHandler(limit) {
      //整理参数
      this.limit = limit;
      this.getSpu();
    },
    //添加SPU按钮的回调
    addSpu() {
      this.scene = 1;
      //获取子组件AddSpu
      this.$refs.spu.initData(this.c3);
    },
    //修改某一个SPU按钮的回调
    updateSpu(spu) {
      this.scene = 1;
      //修改的SPU的相应的ID:在父组件内部调用子组件方法
      this.$refs.spu.initSpuData(spu);
    },
    //添加SKU
    addSku(spu) {
      this.scene = 2;
      //将来需要父组件调用子组件的方法,子组件需要发三个请求
      this.$refs.sku.initSkuData(this.c1, this.c2, spu);
    },
    //子组件通知父组件修改场景
    changeScene({ scene, flag }) {
      this.scene = scene;
      //父组件区分添加还是修改
      if (flag == "update") {
        this.getSpu(this.page);
      } else {
        this.getSpu();
      }
    },
    //查看全部SKU实例
    async watchSku(row) {
      this.dialogTableVisible = true;
      this.load1 = true;
      try {
        let result = await this.$http.spu.reqSkuInfo(row.id);
        this.skuArr = result.data;
        this.load1 = false;
      } catch (error) {}
    },
    //删除某一个SPU
    async deleteSpu(row) {
      try {
        await this.$http.spu.reqDeleteSpu(row.id);
        this.getSpu(
          this.spuInfo.records.length > 1 ? this.page : this.page - 1
        );
      } catch (error) {}
    },
    //豪哥额外将的UI组件
    changeHandler(){
      //双向绑定收集到的是布尔值真与假的
      document.body.style.background=this.bg?'black':'red';
    },
    neirong(){
      return '豪哥';
    }
  },
  components: {
    AddSpu,
    AddSku,
  },
};
</script>

<style scoped>
</style>
